<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>KLLSo</title>
	<link rel="shortcut icon" href=".//博客//Logo//5.jpg" type="image/jpg" />
	<style>



	}
		
		
		/* .caidan{
			width: 500px;
			height:250px;
			position: absolute;

	
		}

		#biaoq1{
            width:300px;
			position: relative;
			margin-top:6%;
			left:60%;
			opacity: 0.8;
			animation-name:myfirst;
			animation-duration: 0.9s;
			display: inline-block;
			/*animation-delay: 2s;


		}
		
		#biaop1{
			position: absolute;
			top:0;
			left:60%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.5em;

		}

		#biaoq2{
			position: relative;
			margin-top:5%;
            left:40%;
            opacity: 0.8;
			display: inline-block;
			animation-name: mysecond;
		    animation-duration:  0.8s;

		}

		#biaop2{
			position: absolute;
			top:0;
			left:50%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.3em;

		}

		#biaoq3{

			position: relative;
			margin-top:5%;
            left:20%;
            opacity: 0.8;
			display: inline-block;
			animation-name: mythird;
		    animation-duration:  0.7s;
		}

		#biaop3{
			position: absolute;
			top:0;
			left:50%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.2em;

		}
		#biaoq4{

			position: relative;
			margin-top:5%;
            left:0%;
            opacity: 0.8;
			display: inline-block;
			animation-name: myfourth;
		    animation-duration:  0.6s;


		}

		#biaop4{
			position: absolute;
			top:0px;
			left:50%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.2em;

		}

		#biaoq5{

			position: relative;
			margin-top:5%;
            left:-18%;
            opacity: 0.8;
			display: inline-block;
			animation-name: myfifth;
		    animation-duration:  0.5s;

		}

		#biaop5{
			position: absolute;
			top:0;
			left:35%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.2em;

		}



		@keyframes myfirst{
			from {left:-20%;top:0px;}
			to{left:60%;top:0px;}
		}

		@keyframes mysecond{
			from {left:-20%;top:px;}
			to{left:40%;top:0px;}
		}

		@keyframes mythird{
			from {left:-120px;top:px;}
			to{left:20%;top:0px;}
		}	

		@keyframes myfourth{
			from {left:-120px;top:0px;}
			to{left:0%;top:0px;}
		}	

		@keyframes myfifth{
			from {left:-120px;top:0px;}
			to{left:-18%;top:0px;}
		}	
		*/
	

	header{
		height: 630px;
	}

	body{
		background: url(".//博客//12.png")
	}

	#topimg{
		position: absolute;
		top:0px;
		left:0px;
		height:575px;
		width: 100%;
		opacity: 0.95;}

	.caidan{
			width: 500px;
			height:700px;


	
		}

	#biaoq1{
            width:300px;
			position: relative;
			margin-top:6%;
			left:-220px;
			opacity: 0.8;
			display: inline-block;


		}
		
		#biaop1{
			position: absolute;
			top:0;
			left:76%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.2em;

		}

		#biaoq2{
			position: relative;
			margin-top:5%;
            left:-220px;
            opacity: 0.8;
			display: inline-block;

		}

		#biaop2{
			position: absolute;
			top:0;
			left:70%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.1em;

		}

		#biaoq3{

			position: relative;
			margin-top:5%;
            left:-210px;
            opacity: 0.8;
			display: inline-block;

		}

		#biaop3{
			position: absolute;
			top:0;
			left:66%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.1em;

		}
		#biaoq4{

			position: relative;
			margin-top:5%;
            left:-220px;
            opacity: 0.8;
			display: inline-block;


		}

		#biaop4{
			position: absolute;
			top:0px;
			left:70%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0.2em;

		}

		#biaoq5{

			position: relative;
			margin-top:5%;
            left:-220px;
            opacity: 0.8;
			display: inline-block;

		}

		#biaop5{
			position: absolute;
			top:0;
			left:70%;
			display: inline;
			color:white;
			font-size: 25px;
			font-weight: bold;
			letter-spacing: 0em;

		}

		#logo{
		     margin-left: 20%;
		     margin-top:3.5%;

		}


		#main{
			height: auto;
		}

		#left{
			width:900px;
			float: left;	
		/*background-color: pink;*/
		}
        
        #kuang1_d{
        	position: relative;

        }

		#kuang1{
			
			width:900px;
			height: 300px;
			margin-bottom: 100px;

		}

		#kuang1_a{
			position: absolute;
			font-size: 25px;
			font-weight: bold;
			top:10%;
			left:16%;
			text-decoration: none;
			color:black;
		}

		#kuang1_a:hover{
			color:blue;
		}

		#kuang1_p{
			position: absolute;
			top:25%;
			width:530px;
			left:15%;
			line-height: 1.7em;

		}



		#right{
			width: 400px;
           
			float: right;

		}

		#lanmu1_d{
			position: relative;
		}

		#lanmu1_p1{
			position: absolute;
			top:0;
			left:35%;
			font-size: 30px;
			color:#454c94;
			letter-spacing: 1em;
		}

		#lanmu1_p2{
			position: absolute;
			top:20%;
			left:10%;
			width:300px;
			text-align: center;
			line-height: 3em;
		}

		#lanmu2{
        width:100%;
        height: 500px;
        margin-top:30%; 
		}

		#lanmu2_d{
			position: relative;

		}

		#lanmu2_p1{
			position: absolute;
			top:20%;
			left:25%;
			font-size: 30px;
			color:#454c94;
			letter-spacing: 1em;
		}

		#lanmu2_p2{
			position: absolute;
			top:30%;
			margin-top:50px;
			width: 300px;
			left: 15%;

		}

		#lanmu2_a{
			text-decoration: none;
			color:black;
			display: block;
			margin-bottom: 30px;
			text-align: center;
		}

		#lanmu2_a:hover{
			color:blue;
		}

		footer{
			height: 250px;
			clear:both;
			background-color: #47474a;
		}



	</style>

</head>
<body >
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<header >
       <img id="topimg" src=".//博客//5.png" alt="头画" >
		<div class="caidan">
		<a id="biaoq1"   href="" style="position: relative;">
			<img  onmouseover="img1_on()" onmouseout="img1_out()"  src=".//博客//菜单//1.png" alt="首页" >
			<p id="biaop1" >首页</p>
		</a>

		<a  id="biaoq2"  onmouseover="img2_on()" onmouseout="img2_out()" href="" style="position: relative;">
			<img  src=".//博客//菜单//2.png" alt="Java" >
			<p id="biaop2" >Java</p>
		</a>

		<a  id="biaoq3" onmouseover="img3_on()" onmouseout="img3_out()" href="" style="position: relative;">
			<img  src=".//博客//菜单//3.png" alt="Linux" >
			<p id="biaop3" >Linux</p>
		</a>

		<a  id="biaoq4"  onmouseover="img4_on()" onmouseout="img4_out()" href="" style="position: relative;">
			<img  src=".//博客//菜单//4.png" alt="首页" >
			<p id="biaop4" >算法</p>
		</a>

		<a  id="biaoq5"  onmouseover="img5_on()" onmouseout="img5_out()"  href="" style="position: relative;">
			<img  src=".//博客//菜单//5.png" alt="首页" >
			<p id="biaop5" >web</p>
		</a>
 <img id="logo" src=".//博客//Logo//0.png" alt="Logo" >
 <!--<audio src="周杰伦+(Jay+Chou)+-+烟花易冷.mp3" autoplay="autoplay" loop=""></audio>-->
		</div>
      
	</header>

	<div id="main">
		<div id="left">
      <div id=kuang1_d>
		<img id="kuang1" src=".//博客//展示//1.png" alt="蓝色框" name="lanse">
		<a href="" id="kuang1_a">Linux 下安装 Oracle 中文乱码</a>
		<p id="kuang1_p">第一次装Oracle，出了点小插曲。安装程序中中文乱码，显示成一个一个的小方块。想来Oracle的安装程序是java写的，所以这个乱码问题应该是由于缺少字体文件造成的。因此去本机中的jre中加字体文件，然而并没有成功。。 后来发现，Oracle安装程序包含</p>
      </div>

      <div id=kuang1_d>
		<img id="kuang1" src=".//博客//展示//1.png" alt="蓝色框" name="lanse">
		<a href="" id="kuang1_a">Linux 下安装 Oracle 中文乱码</a>
		<p id="kuang1_p">第一次装Oracle，出了点小插曲。安装程序中中文乱码，显示成一个一个的小方块。想来Oracle的安装程序是java写的，所以这个乱码问题应该是由于缺少字体文件造成的。因此去本机中的jre中加字体文件，然而并没有成功。。 后来发现，Oracle安装程序包含</p>
      </div>  

       <div id=kuang1_d>
		<img  id="kuang1" src=".//博客//展示//1.png" alt="蓝色框" name="lanse">
		<a href="" id="kuang1_a">Linux 下安装 Oracle 中文乱码</a>
		<p id="kuang1_p">第一次装Oracle，出了点小插曲。安装程序中中文乱码，显示成一个一个的小方块。想来Oracle的安装程序是java写的，所以这个乱码问题应该是由于缺少字体文件造成的。因此去本机中的jre中加字体文件，然而并没有成功。。 后来发现，Oracle安装程序包含</p>
      </div>
		</div>

		<div id="right">

		<div id=lanmu1_d>
		<img  id="lanmu1" src=".//博客//展示//12_1.png" alt="紫色框">
		<p id="lanmu1_p1">笔录</p>
		<p id="lanmu1_p2">今天终于实现了自己的拖了很久的计划<br />用自己写的程序搭建个人博客<br/>博客目前还有很多未完善之处，我会慢慢完善，请大家见谅.<br />2017.01.08</p>
      </div>

      <div id=lanmu2_d>
		<img id="lanmu2" src=".//博客//展示//12_3.png" alt="紫色框">
		<p id="lanmu2_p1">热门文章</p>
		<p id="lanmu2_p2"><a  id="lanmu2_a" href="">在Linux(Fedora)上安装Genymotion</a>
		<a id="lanmu2_a" href="">配置nginx(tengine)使用ajp协议与后端tomcat通讯</a>
		<a id="lanmu2_a" href="">Spring MVC 自定义参数解析器</a>
		<a id="lanmu2_a" href="">一个关于SpringMvc的未解决的问题</a>
		<a id="lanmu2_a" href="">配置Spring Boot以apr、ajp方式启动</a>
		</p>
      </div>
		
		
		
		</div>

	</div>
	<footer>
	</footer>
</body>

</html>

	<script type="text/javascript">
	var biaoq1=document.getElementById("biaoq1");
	var biaoq2=document.getElementById("biaoq2");
	var biaoq3=document.getElementById("biaoq3");
	var biaoq4=document.getElementById("biaoq4");
	var biaoq5=document.getElementById("biaoq5");

	var biaop1=document.getElementById("biaop1");

		function img1_on(){           
            biaoq1.style.left=-120+"px";
            }
            
        function img1_out(){
        	biaoq1.style.left=-220+"px";
        }
        
		function img2_on(){           
             biaoq2.style.left=-120+"px";
            }
            
        function img2_out(){
        	biaoq2.style.left=-220+"px";
        }

        function img3_on(){           
            biaoq3.style.left=-120+"px";
            }
            
        function img3_out(){
        	biaoq3.style.left=-210+"px";
        }
        
        function img4_on(){           
        biaoq4.style.left=-120+"px";
            }
            
        function img4_out(){
        	biaoq4.style.left=-220+"px";
        }

        function img5_on(){           
        biaoq5.style.left=-120+"px";
            }
            
        function img5_out(){
        	biaoq5.style.left=-220+"px";
        }



		</script>